<template>
  <Modal v-model="modalVisible" footer-hide fullscreen title="自助通证添加系统">
    <Row>
      <Col offset="2" span="12">
        <Steps :current="stepCurrent" direction="vertical">
          <Step :content="information1" icon="ios-person" title="信息输入"></Step>
          <Step :content="information2" icon="ios-person" title="通证检测"></Step>
          <Step :content="information3" icon="ios-camera" title="通证操作"></Step>
          <Step :content="information4" icon="ios-mail" title="授权交易池"></Step>
          <Step :content="information5" icon="ios-mail" title="注入交易池"></Step>
        </Steps>
      </Col>
      <Col span="8">
        <h1 style="text-align: center">当前正在进行第 {{ stepCurrent + 1 }} 步</h1>
        <div v-if="stepCurrent===0">
          <el-form ref="numberValidateForm" :model="numberValidateForm" class="demo-ruleForm" label-width="100px">
            <el-form-item
                :rules="[
      { required: true, message: '排碳量不能为空'},
      { type: 'number', message: '排碳量必须为数字值'}
    ]"
                label="排碳量"
                prop="amount"
            >
              <el-input v-model.number="numberValidateForm.amount" autocomplete="off" type="age"></el-input>
            </el-form-item>
            <el-form-item
                :rules="[
      { required: true, message: '碳值不能为空'},
      { type: 'number', message: '碳值必须为数字值'}
    ]"
                label="碳值"
                prop="price"
            >
              <el-input v-model.number="numberValidateForm.price" autocomplete="off" type="age"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
              <el-button @click="resetForm('numberValidateForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <Card v-if="stepCurrent!==0" style="width:320px;height: 320px;margin-left: 70px">
          <div style="text-align:center">
            <Spin v-if="!tokenApproveSuccess" fix>
              <Icon class="demo-spin-icon-load" size=18 type="ios-loading"></Icon>
              <div>处理中</div>
            </Spin>
            <Spin v-if="tokenApproveSuccess" fix>
              <Icon size=18 type="ios-checkmark-circle-outline"></Icon>
              <div>处理成功</div>
            </Spin>
          </div>
        </Card>
      </Col>
    </Row>
  </Modal>
</template>

<script>
import {Message, Notification} from 'element-ui';

export default {
  name: "CreateToken",
  data() {
    return {
      spinShow: true,
      modalVisible: false,
      stepCurrent: 0,
      information1: 'Waiting...',
      information2: 'Waiting...',
      information3: 'Waiting...',
      information4: 'Waiting...',
      information5: 'Waiting...',
      tokenApproveSuccess: false,
      numberValidateForm: {
        amount: '',
        price: ''
      }
    }
  },
  watch: {
    "stepCurrent": function (val) {
      if (val === 1) {
        this.information1 = "信息填写完成,进行下一步"
        setTimeout(() => {
          this.tokenPreviewing()
        }, 2000)
      } else if (val === 2) {
        setTimeout(() => {
          this.tokenCreating(this.numberValidateForm.amount)
        }, 2000)
      } else if (val === 3) {
        setTimeout(() => {
          this.tokenApprove(this.numberValidateForm.amount)
        }, 2000)
      }else if (val ===4){
        setTimeout(()=>{
          this.tokenIntoPool(this.numberValidateForm)
        })
      }
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.numberValidateForm)
          this.stepCurrent = 1
        } else {
          Message.error("请重新输入")
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    tokenPreviewing() {
      this.LeagueJS.tokenPreviewing(status => {
        if (status === false) {
          this.information2 = "您暂无通证，即将发布通证"
        } else {
          this.information2 = "您已有通证，即将增发通证"
        }
        this.stepCurrent = 2
      })
    },
    tokenCreating(value) {
      this.LeagueJS.tokenCreating(value, status => {
        if (status === true) {
          this.information3 = "通证操作成功"
          this.stepCurrent = 3
        } else {
          this.information3 = "通证操作失败"
        }
      })
    },
    tokenApprove(value) {
      this.LeagueJS.tokenApproving(value, status => {
        if (status === true) {
          this.information4 = "授权交易池成功"
          this.stepCurrent = 4
        } else {
          this.information4 = "授权交易池失败"
        }
      })
    },
    tokenIntoPool(value){
      this.LeagueJS.tokenPoolPulling(value,status=>{
        if (status === true) {
          this.information5 = "注入交易池成功"
          this.tokenApproveSuccess = true
          Message.success("处理成功，3秒后自动返回")
          setTimeout(() => {
            this.$emit("CloseModal", false)
          }, 3000)
        } else {
          this.information4 = "注入交易池失败"
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
